<template>
  <div class="yan">
    <!-- 头部导航栏 -->

    <van-nav-bar
      title="手机号登录"
      left-text="×"
      right-text="密码登录"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <h4>请输入验证码</h4>
    <span>已发送至+86</span>

    <!-- 验证码输入框 -->

    <!-- 密码输入框 -->
    <van-password-input
      :value="value"
      :mask="false"
      :focused="showKeyboard"
      @focus="sshowKeyboard = true"
      :length="4"
    />
    <!-- 数字键盘 -->
    <van-number-keyboard
      v-model="value"
      :show="showKeyboard"
      @blur="showKeyboard = false"
      :mask="false"
    />
  </div>
</template>

<script>
import { Toast } from "vant";
import { getToken } from "../utils/tools";
import { loadYanAPI } from "../services/resLogin";
import { loadYanzhengmaAPI } from "../services/resLogin";

export default {
  data() {
    return {
      value: "",
      showKeyboard: true,
      phoneNumber: "",
      captcha: "",
    };
  },

  async created() {
    console.log(this.value);
    //获取存在本地的电话号码
    const res = await loadYanAPI(getToken());
    console.log(getToken());
    console.log(res);
    console.log(this.value);

    if (res.code == 200) {
      Toast.success("验证码发送成功");
    } else {
      Toast.fail("验证码发送失败");
    }
  },
  methods: {
    onClickLeft() {
      this.$router.push({ name: "Login" }); //已改
    },
    onClickRight() {
      this.$router.push({ name: "Password" }); //已改
    },
  },
  watch: {
    async value(value) {
      console.log(getToken());

      console.log(value);

      if (value.length == 4) {
        //如何实现刷新页面不会再次发送验证码以及验证码错误依然保留在本页面
        const res2 = await loadYanzhengmaAPI({
          phone: getToken(),
          captcha: this.value,
        });
        console.log(res2);
        this.$router.push({ name: "Home" });
      }
    },
  },
};
</script>

<style scoped>
span:first-child {
  float: left;
}

span:nth-child(2) {
  float: right;
}
</style>
